<!-- 前台店长 – 首页 – 会员考勤 – 2			attendance -->
<template>
	<view class="warps">
		<view class="punch-top">
			<view class="w90 f b c p_t_20">
				<view class="vw45 f b">
					<image style="width: 96rpx;height: 96rpx;" src="../../../../static/img/099.png" mode=""></image>
					<view class="f d">
						<view class="vw20 f b c">
							<text class="fs28 bold">姓名</text>
							<text class="fs28 bold">性别</text>
						</view>
						<view class="p_t_20">
							<text class="fs28">联系方式联系方式</text>
						</view>
					</view>
				</view>	
				<!-- 雷达图 -->
				<view class="vw15 f d c">
					<image style="width:36rpx;height:36rpx;" src="../../../../static/img/066.png" mode=""></image>
					<text class="fs16 p_t_10">考勤统计</text>
				</view>
			</view>
		</view>
		<view class="w90s" style="position:relative;">
			<view class="Members-biaoges lan senter"  @click="get()">
				<text class="bold">2021年上课次数(月/次)</text>
				<image style="width: 16rpx;height: 16rpx;" src="../../../../static/img/102.png" mode=""></image>
			</view>
			<view v-if="show == true">
				<view class="teaching-lan">
					<view>
						<view class=" senter p_t_20">
							<text>2021年</text>
						</view>
						<view class="quanxian"></view>
					</view>
					<view>
						<view class=" senter p_t_20">
							<text>2020年</text>
						</view>
						<view class="quanxian"></view>
					</view>
					<view>
						<view class=" senter p_t_20">
							<text>2019年</text>
						</view>
						<view class="quanxian"></view>
					</view>
					<view>
						<view class=" senter p_t_20">
							<text>2019年</text>
						</view>
						<view class="quanxian"></view>
					</view>
				</view>
			</view>
			<view>
				<wyb-table ref="table" :headers="headers" :contents="contents" header-bg-color="#BFDBF1" first-col-bg-color="#fff" width="680rpx" height="150rpx"/>
			</view>
			<view>
				<wyb-table ref="table" :headers="headersa" :contents="contentsa" header-bg-color="#BFDBF1" first-col-bg-color="#fff" width="680rpx" height="150rpx"/>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	export default {
		 components: {
		        wybTable
		    },
		data() {
			 const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
        const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				show: false,
				 headers: [{
                label: '1月',
                key: 'name'
            }, {
                label: '2月',
                key: 'age'
            }, {
                label: '3月',
                key: 'collage'
            }, {
                label: '4月',
                key: 'score'
            }, {
                label: '5月',
                key: 'url'
            }, {
                label: '6月',
                key: 'link'
            }],
			headersa: [{
			    label: '7月',
			    key: 'name'
			}, {
			    label: '8月',
			    key: 'age'
			}, {
			    label: '9月',
			    key: 'collage'
			}, {
			    label: '10月',
			    key: 'score'
			}, {
			    label: '11月',
			    key: 'url'
			}, {
			    label: '12月',
			    key: 'link'
			}],
            contents: [{
                name: '0',
                age: '2',
                collage: '3',
                score: '5',
                url:'',
                link: ''
            }],
			contentsa: [{
			    name: '7',
			    age: '5',
			    collage: '6',
			    score: '1',
			    url:'0',
			    link: '0'
			}]
			}
		},
		methods: {
			get() {
				this.show = !this.show
			}
		}
	}
</script>

<style scoped>
	.warps {
		height:100vh;
		overflow: hidden;
		background-color: #F6F8FC;
	}
	.punch-top{
		width: 686rpx;
		height: 144rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
		margin:0 auto;
		margin-top:24rpx;
	}
	.Members-biaoges{
		width: 686rpx;
		height:66rpx;
		line-height:66rpx;
		border: 2rpx solid #f3f3f3;
		font-size:16rpx;
		margin:0 auto;
		margin-top:20rpx;
	}
	.lan{
		background:#BFDBF1;
	}
	.teaching-lan{
		width:188rpx;
		height:318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position:absolute;
		top:70rpx;
		left:490rpx;
		z-index: 99;
	}
</style>
